<template>
    <div>
        <div class="company_info">当前机构：<b>{{ company ? company.name : '-' }}</b></div>
        <div class="option_block">
            <el-row>
                <el-button type="success" icon="el-icon-add" @click="addFormvisible = true"><i class="el-icon-circle-plus-outline"></i> 添加部门</el-button>
                <!-- <el-button type="danger" icon="el-icon-edit" @click="updateDepartment">修改部门</el-button> -->
                <el-button type="warning" @click="toUserPage(1)" plain>
                    <icon-svg icon="guanliyuan"/>
                    管理员管理
                </el-button>
                <el-button type="primary" @click="toUserPage(0)" plain>
                    <icon-svg icon="yonghu"/>
                    会员管理
                </el-button>
                <!-- <el-button type="warning" v-if="selectedRow && selectedRow.deleted_at" icon="el-icon-refresh" @click="deleteDepartment">部门恢复</el-button>
                <el-button type="danger" v-else icon="el-icon-delete" @click="deleteDepartment">部门禁用</el-button> -->
            </el-row>
        </div>
        <div class="content">
            <el-table :data="list" v-loading="loading" highlight-current-row @current-change="handleRowChange">
                <el-table-column prop="name" label="部门名称" width="300"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <icon-svg :icon="scope.row.state == 0 ? 'close1' : 'open_icon_successx'"></icon-svg>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updateDepartment(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-button @click="deleteDepartment(scope.row.id,0)" v-if="scope.row.state == 1" type="text" size="small">禁用</el-button>
                        <el-button @click="deleteDepartment(scope.row.id,1)" v-else type="text" size="small">恢复</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="form.id ? '更新部门' : '添加部门'" :visible.sync="addFormvisible" width="60%">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off" maxlength="200" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addFormvisible = false">关 闭</el-button>
            <el-button type="primary" @click="doSave">{{ form.id ? '更 新' : '添 加' }}</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: true,
                addFormvisible: false,
                company: null,
                id: this.$route.query.id,
                selectedRow: null,
                list: [],
                form: {},
                rules: {
                    name: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
                }
            };
        },
        mounted() {
            if (this.id) {
                const _this = this;
                axios.get(basePath + '/company/info/' + this.$route.query.id).then(function (res) {
                    if (res.success) {
                        //成功
                        _this.company = res.data;
                    }
                });
                this.init();
            } else {
                this.$alert("机构不存在");
            }
        },
        methods: {
            doSave() {
                //保存部门
                if (this.form.id) {
                    this.$confirm("确定更新部门信息吗?").then(this.saveDepartment);
                } else {
                    this.saveDepartment();
                }
            },
            saveDepartment() {
                const _this = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.form.companyId = this.id;
                        axios.post(basePath + '/company/saveDepartment', this.form).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //添加成功
                                _this.$refs['form'].resetFields();
                                _this.addFormvisible = false;
                                _this.init();
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            updateDepartment(id) {
                if (id) {
                    const _this = this;
                    axios.get(basePath + '/company/departmentInfo/' + id).then(function (res) {
                        if (res.success) {
                            _this.form = res.data;
                            _this.addFormvisible = true;
                        } else {
                            _this.$alert(res.msg);
                        }
                    });
                }
            },
            toUserPage(type) {
                let route = type == 1 ? 'admins' : 'users';
                if (this.selectedRow) {
                    this.$router.push('/company/' + route + '?company_id=' + this.selectedRow.companyId + '&department_id=' + this.selectedRow.id);
                } else {
                    this.$message.error("请选择部门");
                }
            },
            deleteDepartment(id, state) {
                if (id) {
                    const _this = this;
                    this.$confirm("确定 " + (state == 0 ? "禁用" : "恢复") + " 部门吗?").then(function () {
                        axios.post(basePath + '/company/deleteDepartment', {id: id, state: state}).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //成功
                                _this.init();
                            }
                        });
                    });
                }
            },
            init() {
                if (this.id) {
                    const _this = this;
                    this.loading = true;
                    axios.get(basePath + '/company/departments/' + this.id).then(function (res) {
                        _this.list = res.data;
                        _this.loading = false;
                    });
                }
            },
            handleRowChange(val) {
                this.selectedRow = val;
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .main_content {
        .company_info {
            margin-bottom: 12px;
        }
    }
</style>
